<template>
  <div class="cate">
    <div class="title">
      <common-head title="商品分类" rightText></common-head>
      <van-icon name="search" @click="$router.push({path:'/search'})" />
    </div>
    <van-tree-select height="55vw" :items="items" :main-active-index.sync="activeIndex">
      <template slot="content">
        <div class="oneCate" v-if="activeIndex==0">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="grid in grids" :to="{path:`/list/${grid.id}`}" :key="grid.id">
              <van-image fit="cover" width="46" height="46" :src="grid.icon" />
              <span style="font-size:14px;">{{grid.name}}</span>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="twoCate" v-if="activeIndex==1">
          <van-grid :column-num="3">
            <van-grid-item v-for="nav in fastNav" :key="nav.id">
              <van-image width="46" height="46" :src="nav.icon" />
              <span style="font-size:12px">{{nav.name}}</span>
            </van-grid-item>
          </van-grid>
        </div>
      </template>
    </van-tree-select>
    <common-scolltop></common-scolltop>
  </div>
</template>

<script>
import CommonHead from "components/CommonHead";
import CommonScolltop from "components/CommonScolltop";
export default {
  data() {
    return {
      activeIndex: 0,
      items: [{ text: "分组 1" }, { text: "分组 2" }],
      grids: [],
      fastNav: []
    };
  },
  created() {
    this.fetchtopNavCate();
    this.fecthFastCate();
  },
  methods: {
    fetchtopNavCate() {
      // 获取banner下nav分类
      this.$http.get("shop/goods/category/all").then(res => {
        this.grids = res.data.data.filter(el => el.pid == 73300);
      });
    },
    fecthFastCate() {
      // 获取快速找药fast的商品数据
      this.$http.get("shop/goods/category/all").then(res => {
        this.fastNav = res.data.data.filter(el => el.pid == 73355);
      });
    }
  },
  components: {
    CommonScolltop,
    CommonHead
  }
};
</script>

<style lang="less" scoped>
.cate {
  padding-top: 65px;
  .title {
    position: relative;
    margin-bottom: 23px;
    .van-icon-search {
      position: absolute;
      right: 12px;
      bottom: 20px;
      color: #fff;
      font-size: 22px;
      z-index: 1;
    }
  }
  /deep/.van-tree-select {
    height: 100% !important;
    .van-tree-select__nav {
      background: #fff;
      flex: none;
      text-align: center;
      width: 100px !important;
      .van-sidebar-item {
        border-left: 6px solid transparent;
        height: 60px;
        padding: 0;
        line-height: 60px;
        background: #fff;
        color: #999;
      }
      .van-sidebar-item--select {
        color: #000;
        border-color: #1fdb9b;
      }
    }
  }
}
</style>